<template>
  <div id="xuancai">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right;"
          type="primary"
          @click="onSubmit()"
          size="small"
          >查询搜索</el-button
        >
        <el-button
          style="float: right; margin-right: 15px;"
          @click="handleResetSearch()"
          size="small"
          >重置</el-button
        >
        <el-button
          size="small"
          style="float: right; margin-right: 15px;"
          @click="NBshow()"
          >高级查看</el-button
        >
      </div>
      <!-- ------------------------跑马灯dialog---------------------------- -->
      <el-dialog
        title="高级查看"
        :visible.sync="PMDialogVisible"
        width="30%"
        center
      >
        <!-- -----------------------跑马灯------------------------------ -->
        <template>
          <el-carousel :interval="4000" type="card" height="300px">
            <el-carousel-item
              v-for="(item, index) in this.$store.state.wzStore.showDemo"
              :key="index"
            >
              <img :src="item.file" height="210px" width="263px" />
              <p>
                <span>{{ item.name }}</span>
                <span>￥{{ item.price }}</span>
              </p>
              <p>
                <el-button
                  @click="add(item.name, item.price)"
                  icon="el-icon-circle-plus"
                ></el-button>
                <span>{{ item.num }}</span>
                <el-button
                  @click="reduce(item.name, item.price)"
                  icon="el-icon-remove"
                ></el-button>
                <br />
              </p>
            </el-carousel-item>
          </el-carousel>
        </template>
        <!-- ----------------------------------------------------------------- -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="PMDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="PMDok">选好了</el-button>
        </span>
      </el-dialog>

      <!-- --------------------------------------------------------------------- -->
      <div style="margin-top: 15px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="">
            <el-select v-model="formInline.select" placeholder="搜索类型">
              <el-option label="菜品名称" value="name"></el-option>
              <el-option label="菜品类型" value="classifyId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="搜索内容">
            <el-input
              v-model="formInline.input"
              placeholder="请输入搜索内容"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- --------------------------------------------------- -->
    <div id="itemBox">
      <div
        v-for="(item, index) in this.$store.state.wzStore.showDemo"
        :key="index"
      >
        <img :src="item.file" />
        <p>
          <span>{{ item.name }}</span>
          <span>￥{{ item.price }}</span>
        </p>
        <p>
          <el-button
            @click="add(item.name, item.price)"
            icon="el-icon-circle-plus"
          ></el-button>
          <span>{{ item.num }}</span>
          <el-button
            @click="reduce(item.name, item.price)"
            icon="el-icon-remove"
          ></el-button>
        </p>
      </div>
    </div>
    <!-- --------------分页----------------------------------------- -->
    <div id="btnBox" v-if="flag">
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        @current-change="changePage"
        :current-page="this.$store.state.wzStore.nowPage"
        :page-size="pageShowNum"
        :total="arrLength"
      >
      </el-pagination>
      <!-- -------------------------------------------------------------- -->
    </div>
    <router-link to="/DCGL/qrXiaDan">
      <el-button type="primary">选好了</el-button>
    </router-link>
  </div>
</template>

<script>
import http from "../../http/http";
import * as url from "../../http/api";
import { mapActions } from "vuex";
export default {
  name: "xuancai",
  data() {
    return {
      pageShowNum: 12,
      // nowPage: 1
      formInline: {
        select: null,
        input: null,
      },
      translateInput: null,
      flag: true,
      PMDialogVisible: false,
    };
  },
  created() {
    //加载组件时请求渲染的数据
    if (this.$store.state.wzStore.demo.length == 0) {
      http({
        url: url.wzDISHESALL,
        method: "post",
        data: {},
      })
        .then((res) => {
          res.data.map((item, index) => {
            this.$store.state.wzStore.demo.push(item);
          });
          for (let i = 0; i < res.data.length; i++) {
            this.$store.state.wzStore.demo[
              i
            ].file = require(`../../assets/0.jpg`);
          }
          this.showTime();
        })
        .catch((err) => {
          console.log(err);
        });
    }
  },
  computed: {
    arrLength() {
      return this.$store.state.wzStore.demo.length;
    },
  },
  methods: {
    // ...mapActions(["xcSearch"]),
    showTime() {
      let begin = (this.$store.state.wzStore.nowPage - 1) * this.pageShowNum;
      let end = begin + this.pageShowNum;
      if (end > this.$store.state.wzStore.demo.length) {
        end = this.$store.state.wzStore.demo.length;
      }
      this.$store.state.wzStore.showDemo = this.$store.state.wzStore.demo.slice(
        begin,
        end
      );
    },
    handleResetSearch() {
      this.flag = true;
      this.formInline.input = null;
      this.formInline.select = null;
      this.$store.state.wzStore.nowPage = 1;
      this.showTime();
    },
    onSubmit() {
      if (this.formInline.input && this.formInline.select) {
        this.flag = false;
        if (this.formInline.select == "name") {
          let obj = {
            selectValue: this.formInline.select,
            inputValue: this.formInline.input,
          };
          this.$store.dispatch("xcSearch", obj);
        } else {
          if (this.formInline.input == "炒菜") {
            this.translateInput = 1;
          } else if (this.formInline.input == "凉菜") {
            this.translateInput = 2;
          } else if (this.formInline.input == "烧菜") {
            this.translateInput = 3;
          }
          let obj = {
            selectValue: this.formInline.select,
            inputValue: this.translateInput,
          };
          this.$store.dispatch("xcSearch", obj);
        }
      }
    },
    PMDok() {
      this.PMDialogVisible = false;
      this.$router.push("/DCGL/qrXiaDan");
    },
    NBshow() {
      this.PMDialogVisible = true;
    },
    changePage(val) {
      this.$store.state.wzStore.nowPage = val;
      this.showTime();
    },
    add(name, price) {
      let temp = this.$store.state.wzStore.demo.filter(
        (item) => item.name == name
      )[0];
      temp.num++;
      let flag = this.$store.state.wzStore.chooseItem.findIndex(
        (item) => item.name == name
      );
      if (flag == -1) {
        this.$store.state.wzStore.chooseItem.push({
          name,
          price,
          num: temp.num,
        });
      }else{
        this.$store.state.wzStore.chooseItem[flag].num = temp.num
      }
      // console.log(flag);

      // console.log(this.$store.state.wzStore.chooseItem);
    },
    reduce(name, price) {
      let arr = this.$store.state.wzStore.chooseItem;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].name == name && arr[i].num == 1) {
          arr.splice(i, 1);
          i++;
        }
        if(arr[i].name == name && arr[i].num != 1){
          arr[i].num --
        }
      }
      // console.log(this.$store.state.wzStore.chooseItem);
      let temp = this.$store.state.wzStore.demo.filter(
        (item) => item.name == name
      )[0];
      if (temp.num > 0) {
        temp.num--;
      }
    },
  },
};
</script>

<style scoped lang="less">
.el-carousel__item {
  p {
    color: black;
    font-size: 14px;
    opacity: 0.75;
    margin: 10px 0;
    span {
      margin: 0 10px;
      font-weight: 600;
      font-size: 20px;
    }
    .el-button {
      padding: 5px 8px;
    }
  }
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-card {
  text-align: left;
  margin-bottom: 15px;
}
.el-pagination {
  margin-bottom: 20px;
}
#xuancai {
  position: relative;
  #itemBox {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    div {
      margin: 20px 35px 25px;
      width: 190px;
      height: 230px;
      border-radius: 15px;
      background-color: #fff;
      color: black;
      img {
        transition: 0.3s;
        border-radius: 15px;
        // &:hover {
        //   transform: scale(1.1);
        // }
      }
      p {
        margin: 10px auto 0;
      }
      span {
        margin: 0 10px;
      }
      img {
        display: block;
        margin: 0 auto 10px;
        width: 190px;
        height: 154.66px;
      }
    }
    .el-button {
      padding: 5px 8px;
    }
  }
}
</style>
